<template>
  <div v-loading="loading">
    <el-table
      ref="TreeTable"
      v-bind="$attrs"
      v-on="$listeners"
      :row-key="rowKey"
      :data="data"
      :border="border"
      :header-cell-style="headerCellStyle"
      :tree-props="treeProps"
      default-expand-all
    >
      <template v-if="$slots.append" slot="append">
        <slot name="append"></slot>
      </template>

      <template v-for="(item, index) in fields">
        <el-table-column
          :key="item.prop + index"
          v-bind="item"
          align="center"
          :render-header="renderHeader"
          :show-overflow-tooltip="item.label == '操作' ? false : true"
        >
          <template slot-scope="scope">
            <span v-if="$scopedSlots[item.prop]">
              <slot :name="item.prop" v-bind="scope"></slot>
            </span>
            <span v-else>{{ scope.row[item.prop] || '-' }}</span>
          </template>
        </el-table-column>
      </template>
      <template slot="empty">
        <el-empty v-if="isEmpty" :image-size="80"></el-empty>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'TreeTable',
  props: {
    // table
    rowKey: {
      type: String,
      default: 'id'
    },
    data: {
      type: Array,
      default: () => []
    },
    fields: {
      type: Array,
      default: () => []
    },
    border: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    isEmpty: { default: true, type: Boolean },
    headerCellStyle: {
      type: Object,
      default: () => {
        return {
          background: '#F4F7FF',
          fontWeight: 'bold',
          color: '#52555B'
        };
      }
    },

    treeProps: {
      type: Object,
      default: () => {
        return { children: 'children', hasChildren: 'hasChildren' };
      }
    }
  },
  computed: {},

  mounted() {},

  methods: {
    renderHeader(h, { column }) {
      return h(
        'el-tooltip',
        {
          props: {
            effect: 'dark',
            content: column.label,
            placement: 'top'
          }
        },
        [h('span', column.label)]
      );
    }
  }
};
</script>

<style lang="scss" scoped></style>
